import { memo, useMemo } from "react";
import styles from "./accept.module.scss";
let Accept: React.FC<{ data: Obj }> = ({ data }) => {
  // console.log(data);
  let list = data.audio_list;
  //时间处理函数
  let tim = useMemo(
    () => (data: string) =>
      "0" +
      Math.floor(Number(data) / 60) +
      ":" +
      (Number(data) % 60 > 9 ? Number(data) % 60 : "0" + (Number(data) % 60)),
    []
  );
  return (
    <>
      {Object.keys(data).length > 0 && data.audio_list.length > 0 && (
        <div className={styles.box}>
          <h3>听故事</h3>
          <ul>
            {list.map((item: Obj) => (
              <li key={item.id}>
                <img src={item.expert_info.avatar} alt="" />
                <div className={styles.audio}>
                  <p>{item.video_name}</p>
                  <p>
                    <span>
                      <i className="iconfont icon-shijian"></i>
                      {tim(item.time)}
                    </span>
                    <span>
                      <i className="iconfont icon-fuwuerji"></i>
                      {item.play_num}
                    </span>
                  </p>
                </div>
                <button>
                  <i className="iconfont icon-bofang"></i>
                  播放
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
    </>
  );
};
export default memo(Accept);
